<template>
  <div class="minivideo flex-center">
    <div class="avatar" v-show="!conferenceSettings.camera">
      <avatar :imgID="userInfo.user_img" :fileType="1" :id="userInfo.user_id" :radius="true"></avatar>
    </div>
    <video ref="video" autoplay muted v-show="conferenceSettings.camera"></video>
    <div class="operation">
      <span>{{ userInfo.user_name }}，我</span>
      <img
        :src="conferenceSettings.voiced ? require('@/assets/cfRoom/images/onAudio.png') : require('@/assets/cfRoom/images/offAudio.png')"
        :class="[conferenceSettings.camera ? 'voice' : 'voiceNoCamera']"
        ondragstart="return false"
      />
      <img
        :src="conferenceSettings.camera ? require('@/assets/cfRoom/images/onVideo.png') : require('@/assets/cfRoom/images/offVideo.png')"
        :class="[conferenceSettings.camera ? 'camera' : 'noCamera']"
        ondragstart="return false"
      />
      <img src="@/assets/cfRoom/images/fullScreen.png" ondragstart="return false" class="fullScreen cp" v-show="conferenceSettings.camera" @click="openFullScreen">
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  computed: {
    // 当前用户信息
    userInfo () {
      return this.$store.state.user.userInfo
    },
    // 当前成员列表中本人信息
    mediaStream () {
      if (this.$store.state.conferenceRoom.cf_members.filter(item => this.tools.isSelf(item.id))) {
        return this.$store.state.conferenceRoom.cf_members.filter(item => this.tools.isSelf(item.id))[0].stream
      } else {
        return null
      }
    },
    // 当前会议设置
    conferenceSettings () {
      return this.$store.state.conferenceRoom.conferenceSettings
    }
  },
  watch: {
    // 监听mediaStream
    mediaStream: {
      immediate: true,
      deep: true,
      handler (val) {
        if (val) {
          this.$nextTick(() => {
            if (this.$refs.video) {
              this.$refs.video.srcObject = val
              this.$refs.video.onloadedmetadata = () => {
                this.$refs.video.play()
              }
              this.$refs.video.addEventListener('pause', () => {
                if (this.$refs.video) {
                  this.$refs.video.play()
                }
              })
              this.$refs.video.addEventListener('ended', () => {
              }, false)
            }
          })
        }
      }
    }
  },
  methods: {
    // 全屏
    openFullScreen () {
      this.$store.commit('conferenceRoom/set_fullScreen_id', this.userInfo.user_id)
    }
  }
}
</script>

<style lang="scss" scoped>
.minivideo {
  margin: 12px;
  background-color: #000;
  width: 300px;
  height: 184px;
  position: relative;
  .avatar {
    display: inline-block;
    width: 64px;
    height: 64px;
    font-size: 16px;
  }
  video {
    width: 100%;
    height: 100%;
  }
  .operation {
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 32px;
    color: #fff;
    line-height: 32px;
    padding: 0 24px;
    background-color: rgba(12,23,47,0.60);

    span {
      font-size: 14px;
      font-weight: 400;
    }
    img {
      width: 20px;
      height: 20px;
      vertical-align: middle;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

    .voice {
      right: 88px;
    }

    .voiceNoCamera {
      right: 56px;
    }

    .camera {
      right: 56px;
    }

    .noCamera {
      right: 24px;
    }

    .fullScreen {
      right: 24px;
    }
  }
}
</style>
